<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            /* 按照就近原则，这个样式中color会被覆盖 */
            color: red;
            /* 按照不冲突原则，这个font-size不会被覆盖 */
            font-size: 12px;
        }

        .d1 {
            /* 按照就近原则，这个样式离结构近，因此执行这个color样式 */
            color: pink;  
        }

        .d2 {
            /* 按照继承性原则，给d2设置样式颜色和字体大小，其中的p标签中的文字也会继承 */
            color: deepskyblue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 
    CSS有三个非常重要的三个特性∶层叠性、继承性、优先级。
      
    1.1 层叠性

        相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠)另一个冲突的样式。
        层叠性主要解决样式冲突的问题

        层叠性原则:

        样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
        样式不冲突，不会层叠


    1.2 继承性

        现实中的继承:我们继承了父亲的姓
        CSS中的继承:子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是∶子承父业。

        恰当地使用继承可以简化代码，降低CSS样式的复杂性
        子元素可以继承父元素的样式( text-, font-, line-这些元素开头的可以继承，以及color属性


   1.3 优先级

        当同一个元素指定多个选择器，就会有优先级的产生。

        选择器相同，则执行层叠性
        选择器不同，则根据选择器权重执行


        选择器权重如下表所示。

        选择器               选择器权重
        继承或者*            0,0,0,0
        元素选择器           0,0,0,1
        类选择器，伪类选择器  0,0,1,0    
        ID选择器             0,1,0,0
        行内样式style=""     1,0,0,0
        !important重要的     无穷大

        优先级的注意点：

            1.权重是有4组数字组成,但是不会有进位。
            2.可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推.
            3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。
            4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000, !important无穷大.
            5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

     -->
     
     <div class="d1">落霞与孤鹜齐飞，秋水共长天一色</div>

     <div class="d2">
        <p>只恐双溪蚱蜢舟，载不动许多愁</p>
     </div>
</body>
</html>